<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  props: {
    modelValue: { type: Number, required: true },
  },
  emits: {
    "update:modelValue": (value: number) => typeof value === "number",
  },
  setup(props, ctx) {
    const tabClick = (index: number) => {
      ctx.emit("update:modelValue", index);
    };

    return { tabClick };
  },
});
</script>

<template>
  <view class="area-picker">
    <template v-if="modelValue === 0">
      <view class="area-picker-text" style="right: 0" @click="tabClick(1)">
        海外
      </view>
      <view class="area-picker-wrapper">
        <image
          class="area-picker-bg"
          src="@/package/guider/static/certificate-area.png"
        />
        <view
          style="
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
          "
        >
          <view class="area-picker-active">国内</view>
          <view class="area-picker-line"></view>
        </view>
      </view>
    </template>
    <template v-else>
      <view class="area-picker-text" style="left: 0" @click="tabClick(0)">
        国内
      </view>
      <view class="area-picker-wrapper" style="margin-left: auto">
        <image
          class="area-picker-bg"
          src="@/package/guider/static/certificate-area.png"
          style="transform: rotateY(180deg)"
        />
        <view
          style="
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
          "
        >
          <view class="area-picker-active">海外</view>
          <view class="area-picker-line"></view>
        </view>
      </view>
    </template>
  </view>
</template>

<style lang="scss">
.area-picker {
  position: relative;
  display: flex;

  .area-picker-text {
    position: absolute;
    bottom: 0;
    width: 392rpx;
    font-size: 28rpx;
    color: #a06a33;
    line-height: 62rpx;
    text-align: center;
    border-radius: 30rpx 30rpx 0 0;
    background: linear-gradient(270deg, #ededed 0%, #f5f5f5 57%);
  }

  .area-picker-wrapper {
    position: relative;
  }

  .area-picker-bg {
    display: block;
    width: 410rpx;
    height: 78rpx;
  }

  .area-picker-active {
    margin-bottom: 2rpx;
    font-size: 32rpx;
    color: #2d2d2d;
    line-height: 44rpx;
    text-align: center;
    font-weight: bold;
  }

  .area-picker-line {
    width: 40rpx;
    height: 8rpx;
    border-radius: 200rpx 0;
    background: linear-gradient(270deg, #ff8700 0%, #ff9d48 100%);
  }
}
</style>